@extends('layout.main')
@section('content')
    <style></style>
    <form class="layui-form layui-row layui-col-space16">
        <div class="layui-col-md3">
            <div class="layui-form-item">
                <input type="text" name="nick_name" value="" placeholder="昵称" class="layui-input" >
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-form-item">
                <input type="text" name="openid" placeholder="微信openid" lay-affix="clear" class="layui-input">
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-form-item">
                <div class="layui-inline" id="ID-laydate-rangeLinked">
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" id="start-created" name="start_created" class="layui-input" placeholder="开始日期">
                    </div>
                    <div class="layui-form-mid">~</div>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" id="end-created" name="end_created" class="layui-input" placeholder="结束日期">
                    </div>
                </div>

            </div>
        </div>

        <div class="layui-btn-container layui-col-xs12">
            <button class="layui-btn" lay-submit lay-filter="staff-table-search">查询</button>
            <button type="reset" class="layui-btn layui-btn-primary">清除</button>
        </div>
    </form>

    <table class="layui-hide" id="staff-list"></table>
@endsection

@section('script')
    <script type="text/html" id="wx_info">
        <a href="javascript:;"><img src="<% d.wx_headimgurl %>" class="layui-nav-img"></a>
        <a href="javascript:;"><% d.wx_nickname %></a>
    </script>
    <script type="text/html" id="staff-admin-type">
        <select name="admin_type" class="layui-border select-staff-primary" lay-ignore>
            <option value="0" <%= 0 === d.admin_type ? 'selected' : '' %> >非管理</option>
            <option value="1" <%= 1 === d.admin_type ? 'selected' : '' %> >管理</option>
            <option value="2" <%= 2 === d.admin_type ? 'selected' : '' %> >超管</option>
        </select>
    </script>
    <script type="text/html" id="staff-mall-id">
        <input class="layui-input" value="<% d.mall_id %>">
    </script>
    <script>
        layui.use(['table','form','laydate'], function(){
            var layer = layui.layer;
            var $ = layui.$;
            var table = layui.table;
            var form = layui.form;
            var laydate = layui.laydate;

            laydate.render({
                elem: '#ID-laydate-rangeLinked',
                range: ['#start-created', '#end-created'],
                type:'datetime',
                rangeLinked: true // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
            });

            // 搜索提交
            form.on('submit(staff-table-search)', function(data){
                var field = data.field; // 获得表单字段
                // 执行搜索重载
                table.reload('staff-list', {
                    page: {
                        curr: 1 // 重新从第 1 页开始
                    },
                    where: field // 搜索的字段
                });
                return false; // 阻止默认 form 跳转
            });

            // 已知数据渲染
            table.render({
                elem: '#staff-list',
                cols: [[ //标题栏
                    {field: 'id', title: 'ID', width: 80},
                    {templet: '#wx_info',field: 'wxuser', title: '用户昵称', width: 240},
                    {edit: 'input',field:'mall_id',title: '租户ID', width: 120},
                    {templet: '#staff-admin-type', title: '管理权限', width: 100},
                    {field: 'wx_openid', title: '微信openid', width: 220},
                    {field: 'wx_unionid', title: '微信unionid', width: 220},
                    {field: 'created_at', title: '创建时间', width: 200},
                    {field: 'updated_at', title: '更新时间', width: 200},
                ]],
                url:'{{ route('staffs') }}',
                method:'post',
                //skin: 'line', // 表格风格
                // even: true,
                parseData: function(res){ // res 即为原始返回的数据
                    return {
                        "code": res.status, // 解析接口状态
                        "msg": res.message, // 解析提示文本
                        "count": res.data.total, // 解析数据长度
                        "data": res.data.items // 解析数据列表
                    };
                },
                done: function(res, curr, count){
                    var options = this;

                    // 获取当前行数据
                    table.getRowData = function(tableId, elem){
                        var index = $(elem).closest('tr').data('index');
                        return table.cache[tableId][index] || {};
                    };

                    // 原生 select 事件
                    var tableViewElem = this.elem.next();
                    tableViewElem.find('.select-staff-primary').on('change', function(){
                        var value = this.value; // 获取选中项 value
                        var _that = this;
                        console.log(_that);
                        var data = table.getRowData(options.id, this); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)

                        var layer_idx = layer.confirm('确认修改管理权限？', {
                            btn: ['确定', '关闭'] //按钮
                        }, function(){
                            axios.post('{{ url('/manage/edit_staff') }}',{'field':'admin_type','id':data.id,'val':value})
                                .then(ret => {
                                    if(ret.status == 200){
                                        layer.msg('保存成功', {icon: 1});
                                    }else{
                                        layer.msg(ret.message, {icon: 0});
                                    }
                                })
                                .catch(err => {
                                    $(_that).val(data.admin_type);
                                    layer.msg('操作失败', {icon: 0});
                                })
                        }, function(){
                            $(_that).val(data.admin_type);
                            layer.close(layer_idx);
                        });
                    });

                    // 单元格普通编辑事件
                    table.on('edit(staff-list)', function(obj){
                        var value = obj.value // 得到修改后的值
                        var data = obj.data // 得到所在行所有键值
                        var field = obj.field; // 得到字段

                        // 更新数据中对应的字段
                        var update = {};
                        update[field] = value;

                        var lay_idx = layer.confirm('确认修改租户？', {
                            btn: ['确定', '关闭'] //按钮
                        }, function(){
                            axios.post('{{ url('/manage/edit_staff') }}',{'field':field,'id':data.id,'val':value})
                                .then(ret => {
                                    if(ret.status == 200){
                                        obj.update(update);
                                        layer.msg('保存成功', {icon: 1});
                                    }else{
                                        obj.update({'mall_id':obj.oldValue});
                                        layer.msg(ret.message, {icon: 0});
                                    }
                                })
                                .catch(err => {
                                    layer.msg('操作失败', {icon: 0});
                                })
                        }, function(){
                            // console.log(obj.oldValue);
                            obj.update({'mall_id':obj.oldValue});
                            layer.close(lay_idx);
                        });
                    });

                },
                className:'staff-table',
                page: true, // 是否显示分页
                limits: [20, 50, 100],
                limit: 20 // 每页默认显示的数量
            });
        });

    </script>
@endsection
